<template>
  <div class="detailBox" v-loading="loading">
    <div class="input_">
      <m-input
        placeholder="请输入内容"
        v-model="queryData.value"
        class="input-with-select"
        @keyup.enter.native="handleIconClick(queryData)"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleIconClick(queryData)"
        ></el-button>
      </m-input>
    </div>
    <m-no-data v-if="isNoData" description="未找到符合条件的数据"></m-no-data>
    <div
      v-if="!isNoData"
      class="car"
      :class="
        Data.malicious_level_infos[0].malicious_level == 0
          ? 'unk'
          : Data.malicious_level_infos[0].malicious_level == 1
          ? 'sec'
          : Data.malicious_level_infos[0].malicious_level == 2
          ? 'sus'
          : Data.malicious_level_infos[0].malicious_level == 3
          ? 'mal'
          : ''
      "
    >
      <div class="top_">
        <div class="left_">
          <!-- 弹窗 -->
          <el-popover
            placement="bottom-start"
            width="500"
            trigger="hover"
            v-if="
              Data.malicious_level_infos &&
              Data.malicious_level_infos.length > 0
            "
          >
            <div class="dialog-content">
              <div
                class="dialog_title"
                v-if="Data.malicious_level_infos.length > 0"
              >
                <!--1=自定义情报源 2=微步本地情报源-->
                {{
                  Data.malicious_level_infos[0].source == 2
                    ? "微步本地"
                    : "自定义情报"
                }}为最高优先级情报源，故展示为
                <span>
                  <span
                    class="unk"
                    v-if="Data.malicious_level_infos[0].malicious_level == 0"
                    >{{ global.maliciousLevelText.level_0 }}</span
                  >
                  <span
                    class="sec"
                    v-if="Data.malicious_level_infos[0].malicious_level == 1"
                    >{{ global.maliciousLevelText.level_1 }}</span
                  >
                  <span
                    class="sus"
                    v-if="Data.malicious_level_infos[0].malicious_level == 2"
                    >{{ global.maliciousLevelText.level_2 }}</span
                  >
                  <span
                    class="mal"
                    v-if="Data.malicious_level_infos[0].malicious_level == 3"
                    >{{ global.maliciousLevelText.level_3 }}</span
                  > </span
                >，此情报共有
                <span
                  v-if="
                    Data.malicious_level_infos.filter((item_) => {
                      if (Data.malicious_level_infos[0].malicious_level == 0) {
                        return item_.malicious_level == 0;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 1) {
                        return item_.malicious_level == 1;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 2) {
                        return item_.malicious_level == 2;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 3) {
                        return item_.malicious_level == 3;
                      }
                    }).length === 0
                  "
                  >0</span
                >

                <span
                  :class="[
                    Data.malicious_level_infos[0].malicious_level == 0
                      ? 'unk'
                      : '',
                    Data.malicious_level_infos[0].malicious_level == 1
                      ? 'sec'
                      : '',
                    Data.malicious_level_infos[0].malicious_level == 2
                      ? 'sus'
                      : '',
                    Data.malicious_level_infos[0].malicious_level == 3
                      ? 'mal'
                      : '',
                  ]"
                >
                  {{
                    Data.malicious_level_infos.filter((item_) => {
                      if (Data.malicious_level_infos[0].malicious_level == 0) {
                        return item_.malicious_level == 0;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 1) {
                        return item_.malicious_level == 1;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 2) {
                        return item_.malicious_level == 2;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 3) {
                        return item_.malicious_level == 3;
                      }
                    }).length
                  }}
                </span>

                个情报源判定为
                <span>
                  <span
                    class="unk"
                    v-if="Data.malicious_level_infos[0].malicious_level == 0"
                    >{{ global.maliciousLevelText.level_0 }}</span
                  >
                  <span
                    class="sec"
                    v-if="Data.malicious_level_infos[0].malicious_level == 1"
                    >{{ global.maliciousLevelText.level_1 }}</span
                  >
                  <span
                    class="sus"
                    v-if="Data.malicious_level_infos[0].malicious_level == 2"
                    >{{ global.maliciousLevelText.level_2 }}</span
                  >
                  <span
                    class="mal"
                    v-if="Data.malicious_level_infos[0].malicious_level == 3"
                    >{{ global.maliciousLevelText.level_3 }}</span
                  > </span
                >。
              </div>
              <m-table-tmpl :hideOperation="true">
                <template slot="table">
                  <m-table :data="maliciData" @sort-change="sortChange">
                    <m-table-column prop="source" label="情报源" sortable>
                      <template slot-scope="scope">
                        <div>
                          <span v-if="scope.row.source == 1">自定义情报</span>
                          <span v-if="scope.row.source == 2">微步本地</span>
                        </div>
                      </template>
                    </m-table-column>
                    <m-table-column
                      prop="malicious_level"
                      label="定性"
                      sortable
                    >
                      <template slot-scope="scope">
                        <div>
                          <span
                            class="unk"
                            v-if="scope.row.malicious_level == 0"
                            >未知</span
                          >
                          <span
                            class="sec"
                            v-if="scope.row.malicious_level == 1"
                            >安全</span
                          >
                          <span
                            class="sus"
                            v-if="scope.row.malicious_level == 2"
                            >可疑</span
                          >
                          <span
                            class="mal"
                            v-if="scope.row.malicious_level == 3"
                            >恶意</span
                          >
                        </div>
                      </template>
                    </m-table-column>
                  </m-table>
                </template>

                <template slot="pagination">
                  <m-pagination
                    :current-page="page"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                  >
                  </m-pagination>
                </template>
              </m-table-tmpl>
            </div>

            <div
              v-if="
                Data.malicious_level_infos &&
                Data.malicious_level_infos.length > 0
              "
              class="icon_ click"
              slot="reference"
              :class="
                Data.malicious_level_infos[0].malicious_level == 0
                  ? 'unk'
                  : Data.malicious_level_infos[0].malicious_level == 1
                  ? 'sec'
                  : Data.malicious_level_infos[0].malicious_level == 2
                  ? 'sus'
                  : Data.malicious_level_infos[0].malicious_level == 3
                  ? 'mal'
                  : ''
              "
            ></div>
          </el-popover>

          <div class="lineVal">
            <div
              class="line_ mal"
              :class="[
                Data.malicious_level_infos[0].malicious_level == 0 ? 'unk' : '',
                Data.malicious_level_infos[0].malicious_level == 1 ? 'sec' : '',
                Data.malicious_level_infos[0].malicious_level == 2 ? 'sus' : '',
                Data.malicious_level_infos[0].malicious_level == 3 ? 'mal' : '',
              ]"
            ></div>
            <div class="padd">
              <div class="sumText">
                {{
                  Data.malicious_level_infos[0].malicious_level == 0
                    ? global.maliciousLevel.level_0
                    : Data.malicious_level_infos[0].malicious_level == 1
                    ? global.maliciousLevel.level_1
                    : Data.malicious_level_infos[0].malicious_level == 2
                    ? global.maliciousLevel.level_2
                    : Data.malicious_level_infos[0].malicious_level == 3
                    ? global.maliciousLevel.level_3
                    : ""
                }}
              </div>
              <div
                class="sumVal"
                v-if="
                  Data.malicious_level_infos &&
                  Data.malicious_level_infos.length > 0
                "
              >
                <span
                  v-if="
                    Data.malicious_level_infos.filter((item_) => {
                      if (Data.malicious_level_infos[0].malicious_level == 0) {
                        return item_.malicious_level == 0;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 1) {
                        return item_.malicious_level == 1;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 2) {
                        return item_.malicious_level == 2;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 3) {
                        return item_.malicious_level == 3;
                      }
                    }).length === 0
                  "
                  >0</span
                >
                <span
                  :class="[
                    Data.malicious_level_infos[0].malicious_level == 0
                      ? 'unk'
                      : '',
                    Data.malicious_level_infos[0].malicious_level == 1
                      ? 'sec'
                      : '',
                    Data.malicious_level_infos[0].malicious_level == 2
                      ? 'sus'
                      : '',
                    Data.malicious_level_infos[0].malicious_level == 3
                      ? 'mal'
                      : '',
                  ]"
                >
                  {{
                    Data.malicious_level_infos.filter((item_) => {
                      if (Data.malicious_level_infos[0].malicious_level == 0) {
                        return item_.malicious_level == 0;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 1) {
                        return item_.malicious_level == 1;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 2) {
                        return item_.malicious_level == 2;
                      }
                      if (Data.malicious_level_infos[0].malicious_level == 3) {
                        return item_.malicious_level == 3;
                      }
                    }).length
                  }}
                </span>
                /{{ Data.malicious_level_infos.length }}
              </div>
            </div>
            <div
              class="line_ l2 mal"
              :class="[
                Data.malicious_level_infos[0].malicious_level == 0 ? 'unk' : '',
                Data.malicious_level_infos[0].malicious_level == 1 ? 'sec' : '',
                Data.malicious_level_infos[0].malicious_level == 2 ? 'sus' : '',
                Data.malicious_level_infos[0].malicious_level == 3 ? 'mal' : '',
              ]"
            ></div>
          </div>
        </div>
        <div class="right_">
          <div class="dl_">
            <div class="cen">
              <div class="textName">
                <span class="text">{{ nameValue }}</span>
                <i
                  class="el-icon-document-copy click"
                  @click="$copy(nameValue)"
                ></i>
              </div>
              <div
                class="tag"
                v-if="Data.judgments && Data.judgments.length > 0"
              >
                <m-tag
                  v-for="(jitem, index) in Data.judgments"
                  :type="
                    index == 0
                      ? 'danger'
                      : index == 1
                      ? 'warning'
                      : index == 2
                      ? 'info'
                      : index == 3
                  "
                  >{{ jitem }}</m-tag
                >
              </div>
              <div
                class="info"
                v-if="Data.base_mapping && Data.base_mapping.length > 0"
              >
                <div class="modeLi" v-for="(itemB, index) in Data.base_mapping">
                  <div class="li">
                    <span>{{ itemB.key }}</span>
                    <span class="val">{{ itemB.value || "-" }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="ul">
                <div class="text">情报源</div>
                <div class="imgBox">
                  <img
                    v-if="Data.intel_sources && Data.intel_sources.length > 0"
                    v-for="(item, index) in Data.intel_sources"
                    :key="index"
                    class="img_"
                    :src="global.intelSourcesImg[item - 1].img"
                    :alt="global.intelSourcesImg[item - 1].name"
                    :title="global.intelSourcesImg[item - 1].name"
                  />
                  <!--                  <img
                    v-if="Data.intel_sources && Data.intel_sources.length > 0 && Data.intel_sources[0]>=1"
                    class="img_"
                    src="@/assets/image/home/LOGO1.png"
                    alt="微步本地"
                    title="微步本地"
                  />
                  <img
                    v-if="Data.intel_sources && Data.intel_sources.length > 0 && Data.intel_sources[0]>=2"
                    class="img_"
                    src="@/assets/image/home/LOGO2.png"
                    alt="自定义"
                    title="自定义"
                  />
                  <img
                    v-if="Data.intel_sources && Data.intel_sources.length > 0 && Data.intel_sources[0]>=3"
                    class="img_"
                    src="@/assets/image/home/LOGO3.png"
                    alt="自定义"
                    title="自定义"
                  />-->
                  <m-tag
                    type="danger"
                    v-if="
                      Data.intel_sources &&
                      Data.intel_sources.length > 0 &&
                      Data.intel_sources[0] >= 4
                    "
                  >
                    +{{ Data.intel_sources.length }}
                  </m-tag>
                </div>
              </div>
              <div class="ul">
                <div class="text">情报入库时间</div>
                <div class="text t2">
                  {{
                    Data.create_time
                      ? new Date(Data.create_time).F("yyyy-MM-dd hh:mm:ss")
                      : "-"
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="bl_">
            <div
              class="info"
              v-if="Data.describe_mapping && Data.describe_mapping.length > 0"
            >
              <div class="modeLi" v-for="item in Data.describe_mapping">
                <div class="detail">
                  <span class="leb">{{ item.key }}</span>
                  <span class="val">{{ item.value }} </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!isNoData" class="tabsBox">
      <m-tabs v-model="activeName" @tab-click="handleClick">
        <m-tab-pane label="情报信息" name="1"></m-tab-pane>
      </m-tabs>

      <m-tabs
        class="tabsCuree"
        tab-position="left"
        v-if="Data.details && Data.details.length > 0"
        @tab-click="handleClick2"
      >
        <m-tab-pane v-for="(itemMa, index) in Data.details" :name="index">
          <span v-if="itemMa.intel_source == 1" slot="label"
            ><p class="img LOGO1"></p>
            <p>自定义情报</p></span
          >
          <span v-if="itemMa.intel_source == 2" slot="label"
            ><p class="img LOGO2"></p>
            <p>微步本地</p></span
          >
        </m-tab-pane>
        <!-- 情报信息 -->
        <div v-for="(itemMa, index) in Data.details" :name="index">
          <div class="Table" v-if="eventValue == index">
            <m-table :data="tableData" @sort-change="sortChange" border>
              <m-table-column prop="name" label="威胁类型">
                <template slot-scope="scope">
                  <div
                    v-if="
                      itemMa.judgment_infos && itemMa.judgment_infos.length > 0
                    "
                  >
                    <m-tag
                      v-for="item in itemMa.judgment_infos"
                      type="danger"
                      >{{ item.judgment }}</m-tag
                    >
                  </div>
                </template>
              </m-table-column>
            </m-table>
          </div>
          <div
            class="Table baleBox"
            v-if="itemMa.tags_classes && eventValue == index"
          >
            <m-table :data="tableData" @sort-change="sortChange" border>
              <m-table-column prop="name" label="相关攻击团伙或安全事件信息">
                <template slot-scope="scope">
                  <div>
                    <div class="bale">
                      <div class="li lab">犯罪团伙：</div>
                      <div class="li">{{ itemMa.tags_classes.gangs.toString() }}</div>
                    </div>
                    <div class="bale">
                      <div class="li lab">病毒家族：</div>
                      <div class="li">
                        {{ itemMa.tags_classes.virus_family.toString() }}
                      </div>
                    </div>
                    <div class="bale">
                      <div class="li lab">相关行业：</div>
                      <div class="li">{{ itemMa.tags_classes.industry.toString() }}</div>
                    </div>
                    <div class="bale">
                      <div class="li lab">相关区域：</div>
                      <div class="li">{{ itemMa.tags_classes.region.toString() }}</div>
                    </div>
                    <div class="bale">
                      <div class="li lab">安全漏洞：</div>
                      <div class="li">
                        {{ itemMa.tags_classes.vulnerability.toString() }}
                      </div>
                    </div>
                    <div class="bale">
                      <div class="li lab">基础标签：</div>
                      <div class="li">{{ itemMa.tags_classes.basic.toString() }}</div>
                    </div>
                    <div class="bale">
                      <div class="li lab">公共信息：</div>
                      <div class="li">
                        {{ itemMa.tags_classes.public_info.toString() }}
                      </div>
                    </div>
                    <div class="bale">
                      <div class="li lab">安全事件：</div>
                      <div class="li">
                        {{ itemMa.tags_classes.security_event.toString() }}
                      </div>
                    </div>
                  </div>
                </template>
              </m-table-column>
            </m-table>
          </div>
        </div>
      </m-tabs>
    </div>
  </div>
</template>

<script>
import { maliciousLevel } from "@/utils/enumeration";

// 引入接口
import { IntelligenceSearch } from "@/request/home/index";
export default {
  name: "Detail",
  data() {
    return {
      loading: true,
      Data: [],
      queryData: {},
      eventValue: 0,
      maliciData: [],
      tableData: [
        {
          name: "",
        },
      ],
      nameValue: null,
      input: null,
      page: 1,
      total: 0,
      pageSize: this.preferences.TablePageSize,
      pageSizes: this.preferences.TablePageSizes,
      activeName: "1",
      isNoData: false,
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.queryData = {
      types: this.$route.query.types,
      value: this.$route.query.value,
    };
    this.getData(this.queryData);
  },
  methods: {
    getData(data) {
      this.loading = true;
      IntelligenceSearch(data)
        .then((res) => {
          console.log(res);
          this.loading = false;
          if (res.data.code == 200) {
            this.isNoData = false;
            let resData = res.data;
            this.nameValue = resData.data.name;
            if (resData.data.intel_type == 0) {
              this.$router.push({ query: this.queryData });
              this.Data = resData.data.ip_info;
              this.total = this.Data.malicious_level_infos.length;
              console.log(this.Data, "ipData");
              this.paginatedDataMalicious(
                this.Data.malicious_level_infos,
                this.page,
                this.pageSize
              );
            } else if (resData.data.intel_type == 1) {
              this.$m.to("HomeDomainDetail", {
                type: resData.data.intel_type,
                value: this.queryData.value,
              });
            } else if (resData.data.intel_type == 4) {
              this.$m.to("HomeMySqlDetail", {
                type: resData.data.intel_type,
                value: this.queryData.value,
              });
            }
          }
        })
        .catch((err) => {
          this.loading = false;
          if (err == "查询情报来源时没有找到结果") {
            // 查询情报来源时没有找到结果
            this.isNoData = true;
            this.$router.push({ query: { ...data } });
          }
        });
    },
    paginatedDataMalicious(data, page, pageSize) {
      if (data.length > 0) {
        const start = (page - 1) * pageSize;
        const end = start + pageSize;
        console.log(data.slice(start, end), "32323");
        this.maliciData = data.slice(start, end); // 根据当前页码和每页数据量切片原始数据数组
      }
    },
    // 排序改变
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    handleIconClick(data) {
      this.getData(data);
    },
    // 每页数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page = 1;
      this.pageSize = val;
      // this.getData();
    },
    // 页码变化
    handleCurrentChange(val) {
      this.page = val;
      this.paginatedDataMalicious(
        this.Data.malicious_level_infos,
        this.page,
        this.pageSize
      );
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick2(event) {
      this.eventValue = event.index;
      this.getData(this.queryData);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
.detailBox {
  background-color: transparent !important;
  box-shadow: none !important ;
  ::v-deep .tabsCuree {
    position: relative !important;
    .el-tabs__header {
      position: absolute;
      height: 100%;
    }
    .el-tabs__content {
      margin-left: px2(140);
    }
    .el-tabs__nav {
      margin-right: px2(15);
    }
    .el-tabs__active-bar {
      background-color: transparent !important;
    }
    .is-active {
      background-color: #e8f4ff;
    }
    .el-tabs__item {
      position: relative;
      min-width: px2(125);
      span {
        padding: 0 px2(20);
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        .img {
          display: inline-block;
          width: px2(16);
          height: px2(16);
          &.LOGO2 {
            background-image: url("./../../../assets/image/home/LOGO2.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          &.LOGO1 {
            background-image: url("./../../../assets/image/home/LOGO1.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
  ::v-deep .input_ {
    width: 100%;
    .el-input__inner {
      height: px2(34);
    }
    .el-input-group__append {
      background-color: $mainColor;
      width: px2(32);
      height: px2(32);
      padding: 0;
      .el-button {
        width: px2(32);
        height: px2(32);
        padding: 0;
        margin: 0;
      }
    }
    .el-icon-search {
      font-size: px2(16);
      color: #fff;
    }
  }
  ::v-deep .el-row .el-col {
    .li {
      white-space: nowrap !important;
    }
  }
  .car {
    padding: px2(16);
    margin-top: px2(8);
    border-radius: px2(2);
    margin-bottom: px2(8);
    background: linear-gradient(
        180deg,
        rgba(255, 201, 185, 0.18) 0%,
        rgba(254, 210, 204, 0) 62%
      ),
      rgba(255, 255, 255, 0.5);
    &.mal {
      background: linear-gradient(
          180deg,
          rgba(255, 201, 185, 0.18) 0%,
          rgba(254, 210, 204, 0) 62%
        ),
        rgba(255, 255, 255, 0.5);
    }
    &.sec {
      background: linear-gradient(
          180deg,
          rgba(235, 255, 249, 0.5) 0%,
          rgba(248, 253, 252, 0) 62%
        ),
        rgba(255, 255, 255, 0.5);
    }
    &.sus {
      background: linear-gradient(
          180deg,
          rgba(255, 239, 214, 0.15) 0%,
          rgba(255, 239, 214, 0) 62%
        ),
        rgba(255, 255, 255, 0.5);
    }
    &.unk {
      background: linear-gradient(
          180deg,
          rgba(234, 240, 250, 0.5) 0%,
          rgba(234, 240, 250, 0) 62%
        ),
        rgba(255, 255, 255, 0.5);
    }
    backdrop-filter: blur(px2(40));
    .top_ {
      display: flex;
      flex-wrap: nowrap;
      justify-content: start;
      align-items: top;
      .left_ {
        width: 10%;
        margin-right: px2(24);

        .icon_ {
          width: px2(88);
          height: px2(88);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          &:hover {
            .dialog {
              display: block;
            }
          }
          // 恶意
          &.mal {
            background-image: url("@/assets/image/home/mal.png");
          }
          // 安全
          &.sec {
            background-image: url("@/assets/image/home/sec.png");
          }
          // 可疑
          &.sus {
            background-image: url("@/assets/image/home/sus.png");
          }
          // 未知
          &.unk {
            background-image: url("@/assets/image/home/unk.png");
          }
        }
        .lineVal {
          width: px2(88);

          .line_ {
            width: px2(80);
            height: px2(1);
            margin: 0 auto;
            margin-top: px2(25);
            &.l2 {
              margin-top: 0;
            }
            &.mal {
              background: linear-gradient(
                90deg,
                rgba(245, 39, 39, 0) 0%,
                #f52727 51%,
                rgba(245, 39, 39, 0) 100%
              );
            }
            &.sec {
              background: linear-gradient(
                90deg,
                rgba(32, 204, 148, 0) 0%,
                #20cc94 52%,
                rgba(32, 204, 148, 0) 100%
              );
            }
            &.sus {
              background: linear-gradient(
                90deg,
                rgba(255, 239, 214, 0) 0%,
                #fa721b 51%,
                rgba(255, 239, 214, 0) 100%
              );
            }
            &.unk {
              background: linear-gradient(
                90deg,
                rgba(161, 167, 179, 0) 0%,
                #a1a7b3 52%,
                rgba(161, 167, 179, 0) 100%
              );
            }
          }
          .padd {
            padding: px2(5) 0;
            text-align: center;
            .sumText {
              margin-bottom: px2(5);
              font-size: px2(12);
              color: $fontColorL;
            }
            .sumVal {
              font-size: px2(12);
              color: $fontColorL;
              span {
                color: #f52727;
              }
            }
          }
        }
      }
      .right_ {
        width: 90%;
        .info {
          font-size: px2(12);
          color: $fontColorL;
          display: flex;
          flex-wrap: wrap;
          justify-content: start;
          .modeLi {
            min-width: px2(270);
            margin-bottom: px2(18);
          }
          .li {
            margin-right: px2(40);
            span {
              display: inline-block;
              vertical-align: middle;
            }
            .val {
              color: $fontColorW;
              margin-left: px2(16);
            }
          }
        }
        .dl_ {
          border-bottom: px2(1) solid $borderColor;
          .cen {
            width: 100%;
            margin-right: px2(100);
            .textName {
              font-size: px2(20);
              margin-bottom: px2(18);
              color: $fontColorW;
              display: flex;
              flex-wrap: nowrap;
              justify-content: start;
              align-items: center;
              .text {
                margin-right: px2(5);
              }
              .el-icon-document-copy {
                font-size: px2(14);
              }
            }
            .tag {
              margin-bottom: px2(15);
            }
          }
          .right {
            position: absolute;
            top: $gap;
            right: $gap;
            min-width: px2(300);
            font-size: px2(12);
            display: flex;
            flex-wrap: nowrap;
            justify-content: start;
            align-items: center;
            .ul {
              padding: px2(0) $gap;
              white-space: nowrap;
              &:first-child {
                border-right: px2(1) solid $borderColor;
              }
              .text {
                color: #5e6573;
                margin-bottom: px2(5);
                &.t2 {
                  color: $fontColorW;
                  margin-top: px2(10);
                }
              }

              .imgBox {
                .img_ {
                  display: inline-block;
                  vertical-align: middle;
                  width: px2(16);
                  height: px2(16);
                  margin-right: px2(5);
                }
              }
            }
          }
        }
        .bl_ {
          margin-top: px2(18);
          .el-col:nth-child(4n) {
            margin-bottom: px2(10);
          }
          .detail {
            font-size: px2(12);
            color: $fontColorL;

            span {
              display: inline-block;
              vertical-align: middle;
            }
            .leb {
              min-width: px2(60);
            }
            .val {
              margin-left: px2(16);
              color: $mainColor;
            }
          }
        }
      }
    }
  }

  .tabsBox {
    background-color: #fff;
    padding: px2(16);
    padding-top: px2(10);
    .Table {
      padding-top: px2(10);
      margin: 0;
      padding-right: px2(15);
      padding-left: px2(20);
    }
    ::v-deep .el-tabs__item {
      font-size: px2(14);
      color: $fontColorW;
    }
    ::v-deep .el-tabs__item.is-active {
      color: $mainColor;
    }
    ::v-deep .el-tabs__active-bar {
      background-color: $mainColor;
    }
  }
}
.whois {
  .ul {
    margin-bottom: px2(19);
    span {
      display: inline-block;
      vertical-align: middle;
    }
    .whName {
      width: px2(80);
      text-align: right;
      margin-right: px2(70);
    }
  }
}
.SSL {
  .title {
    font-size: px2(14);
    color: #2f3540;
    margin-bottom: px2(8);
  }
  .sshZs {
    background: #edf1f7;
    border: px2(1) solid #dee3eb;
    padding: px2(20);

    .zhBtn {
      width: px2(68);
      text-align: center;
      border-radius: px2(5);
      height: px2(24);
      line-height: px2(24);
      border: px2(1) solid #03a500;
      color: #03a500;
      font-size: px2(10);
    }
    .sslText {
      margin-top: px2(14);
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      .mode {
        width: 50%;
        font-size: px2(10);
        .li {
          display: flex;
          flex-wrap: nowrap;
          justify-content: start;
          margin-bottom: px2(12);
          .label {
            width: px2(88);
            color: #97999f;
          }
          .val {
            color: #727478;
          }
        }
      }
    }
  }
}

.baleBox {
  ::v-deep .el-table--border .el-table__cell:first-child .cell {
    padding: 0 !important ;
  }
  ::v-deep .el-table .el-table__cell {
    padding: 0 !important ;
  }
  .bale {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    .li {
      height: px2(32);
      width: 100%;
      &.lab {
        width: px2(80);
        text-align: center;
      }
      &:nth-child(2){
        padding-left: px2(6);
      }
      border: px2(1) solid #dee3eb;
      border-top: none;
      border-left: none;
    }
  }
}
.pageCter {
  padding-top: px2(10);
  text-align: right;
}

.dialog_title {
  font-size: px2(12);
  color: $fontColorW;
  margin-bottom: px2(10);
  span {
    color: $red;
  }
}
.red {
  color: #f56c6c;
}
.unk {
  color: #6f7785 !important;
}
.sec {
  color: #12a679 !important;
}
.sus {
  color: #fcae7d !important;
}
.mal {
  color: #f56c6c !important;
}
</style>
